<template>
	<view class="container">
		<view  class="header" @click="toPage('riskTask')">
			<view class="left">
				<image :src="userInfo.avatar"></image>
				<text>{{ userInfo.name }}</text>
			</view>
			<view class="right">
				<view class="item">
					<view>职务：{{ userInfo.zhiwu }}</view>
					<view>未巡检：共<text class="uncheck">{{ userInfo.notCheck }}</text>条</view>
				</view>
				<view class="item">
					<view>巡检级：{{ userInfo.level }}级</view>
					<view>待整改：共<text class="checking">{{ userInfo.notDone }}</text>条</view>
				</view>
				<view class="item">
					<view>周期：{{ userInfo.cycle }}</view>
					<view>待验收：共<text class="checked">{{ userInfo.notYanshou }}</text>条</view>
				</view>
				<image src="../../static/fengxianxuncha/arrow-r.png" mode=""></image>
			</view>
		</view>
		<view class="entry">
			<view class="block" @click="scanCode">
				<view class="img"><image src="../../static/fengxianxuncha/scan.png"></image></view>
				<text>风险巡查扫一扫</text>
			</view>
			<view class="block" @click="toPage('riskLevel')">
				<view class="img"><image src="../../static/fengxianxuncha/dept.png"></image></view>
				<text>风险分级管控</text>
			</view>
			<view class="block" @click="toPage('branchList')">
				<view class="img"><image src="../../static/fengxianxuncha/users.png"></image></view>
				<text>人员分级网络</text>
			</view>
		</view>
		<view class="tabs">
			<view class="tab" @click="toggleTab(0)" :class="{active: activeTabIndex == 0}"><text>日常巡查</text></view>
			<view class="tab" @click="toggleTab(1)" :class="{active: activeTabIndex == 1}"><text>交接班</text></view>
			<view class="tab" @click="toggleTab(2)" :class="{active: activeTabIndex == 2}"><text>综·专检查</text></view>
		</view>
		<scroll-view @scrolltolower="getSpeicalNextPageData" scroll-y="true" class="list">
			<!--日常巡检-->
			<block v-if="activeTabIndex == 0">
				<view class="item" v-for="item in list" :key="item.id" @click="showToast('请扫风险点二维码')">
					<view class="top">
						<view class="left">
							<view>巡检名称：{{ item.title }}</view>
							<view>巡检周期：{{ item.cycle }}</view>
							<view>起始时间：{{ item.from_day }}</view>
							<view>截止时间：{{ item.last_day }}</view>
						</view>
						<view class="right" v-if="item.is_move == 0">
							<image src="../../static/fengxianxuncha/transfer.jpg"></image>
							<view class="transfer" @click.stop.prevent="transferTask(item)">任务转让</view>
						</view>
						<view class="right" v-if="item.is_move == 1 && item.to_user == userid">
							<image src="../../static/fengxianxuncha/transfering.jpg"></image>
							<view class="transfer-text">转交中</view>
						</view>
						<view class="right" v-if="item.is_move == 1 && item.user_id == userid">
							<image src="../../static/fengxianxuncha/transfering.jpg"></image>
							<view class="transfer-text">转交中</view>
							<view class="transfer" @click.stop.prevent="cancelTransferTask(item,'是否取消转交')">取消转交</view>
						</view>
					</view>
					<view class="btns" v-if="item.is_move == 1 && item.to_user == userid">
						<view class="receive" @click.stop.prevent="confirmReceiveTask(item)">确认接收</view>
						<view class="refuse" @click.stop.prevent="cancelTransferTask(item,'是否拒绝任务')">拒接接收</view>
					</view>
				</view>
			</block>
			<!--交接班-->
			<block v-if="activeTabIndex == 1">
				<button @click="toPage('riskHandleStart')" type="primary">发起交班</button>
				<view class="card-box">
					<view class="card-box-title">交接班记录</view>
					<view class="card-box-content">
						<view @click="toDetail(item)" v-for="(item, index) in list" :key="index" class="card">
							<view class="item flex_row">
								<text>交接人：{{ item.userName }}</text>
								<text v-if="item.touserName">接班人：{{ item.touserName }}</text>
							</view>
							<view class="item">交接时间：{{ item.addtime }}</view>
						</view>
					</view>
				</view>
			</block>
			<!--日常巡检-->
			<block v-if="activeTabIndex == 2">
				<view @click="toSpecialDetail(item)" class="item" v-for="item in list" :key="item.id" :class="{success: item.STATUS}">
					<view class="top">
						<view class="left">
							<view>巡检名称：{{ item.title }}</view>
							<view>检查区域：{{ item.check_quyu }}</view>
							<view>起始时间：{{ item.from_day }}</view>
							<view>截止时间：{{ item.last_day }}</view>
						</view>
						<view v-if="item.STATUS" class="right">
							<image src="../../static/img/risk/checked-flag.png"></image>
							<view class="status">已检查</view>
						</view>
						<view v-else class="right">
							<image src="../../static/fengxianxuncha/transfer.jpg"></image>
							<view class="status">未检查</view>
						</view>
					</view>
				</view>
			</block>
			<view class="none">没有更多了~</view>
		</scroll-view>
		<!--日期选择-->
		<mx-date-picker :show="showPicker" :value="start_time" type="date" :showHoliday="showHoliday" :beginTime="startDate" @confirm="onSelected" @cancel="onCancel"/>
	</view>
</template>

<script>
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
export default{
	components: {
		MxDatePicker
	},
	data(){
		const currentDate = this.getDate({
			format: true
		})
		return{
			userid: uni.getStorageSync('userid'),
			activeTabIndex: 0,
			userInfo: {
				avatar: '/static/fengxianxuncha/user.png',
				name: '',
				zhiwu: '',
				notCheck: 0,
				notDone: 0,
				notYanshou: 0,
				level: '',
				cycle: ''
			},
			page: 1,
			total: 0,
			list: [],
			start_time: currentDate,
			startDate: currentDate,
			showPicker: false,
			showHoliday: false
		}
	},
	onLoad() {
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
	},
	onShow() {
		var touser = uni.getStorageSync('to_user');
		console.log(touser+"----------------")
		// 存在时，执行任务转让操作
		if(uni.getStorageSync('to_user')) this.showPicker = true;
		
		this.getUserInfo();
		// this.getNormalList();
		
		// 更新数据
		this.toggleTab(this.activeTabIndex);
	},
	onBackPress(){
		this.showPicker = false;
		uni.removeStorageSync('to_user');
	},
	methods: {
		// 交接班详情
		toDetail(item){
			// 通过当前userid与item.to_user是否相同判断是我发起的还是等待我接收的交班
			let url = this.userid == item.to_user ? 'riskHandleDetailCheck' : 'riskHandleDetail';
			uni.navigateTo({
				url: url + '?id='+item.id
			})
		},
		// 切换tab
		toggleTab(index){
			this.page = 1;
			this.total = 0;
			this.list = [];
			this.activeTabIndex = index;
			if(index == 0) this.getNormalList();
			if(index == 1) this.getHandleList();
			if(index == 2) this.getSpecialList();
		},
		// 扫一扫
		scanCode(){
			// #ifdef APP-PLUS
				/* 隐藏凸起图标 */
				var icon = plus.nativeObj.View.getViewById("icon");
				if(icon){icon.hide();}
			// #endif
			var _this = this;
			uni.scanCode({
				success: function (res) {
					if(uni.getStorageSync("userid")){
						if(!_this.GetQueryString(res.result,'id')){
							return false;
						}
						uni.navigateTo({
							url:'/pages/huihuandeweizhi/fengxianxuncha?id='+_this.GetQueryString(res.result,'id')+'&position='+_this.GetQueryString(res.result,'position')
						})
					}else{
						plus.runtime.openURL(res.result)
					}
				}
			});
		},
		//获取地址参数
		GetQueryString(url,name) { 
		  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		  url = url.slice(url.indexOf("?"));
		  var r = url.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
		  var context = ""; 
		  if (r != null) 
			 context = r[2]; 
		  reg = null; 
		  r = null; 
		  return context == null || context == "" || context == "undefined" ? "" : context; 
		},
		// 确认接收任务
		confirmReceiveTask(data){
			let _this = this;
			uni.showModal({
				content: '是否接收任务',
				success: (res)=>{
					let { cancel, confirm } = res;
					if(cancel) return;
					
					uni.showLoading();
					uni.request({
						method: 'POST',
						url: _this.$API.confirmReceiveTask,
						data: {
							userid: uni.getStorageSync('userid'),
							mission_id: data.mission_id
						},
						header: _this.$API.get_head(),
						success: (res)=>{
							uni.hideLoading();
							uni.showToast({title: '接收成功'});
							_this.getNormalList();
						},
						fail: ()=>{
							uni.hideLoading();
						}
					})
				}
			})
		},
		// 取消转交
		cancelTransferTask(data, content){
			let _this = this;
			uni.showModal({
				content,
				success: (res)=>{
					let { cancel, confirm } = res;
					if(cancel) return;
					
					uni.showLoading();
					uni.request({
						method: 'POST',
						url: _this.$API.cancelTransferTask,
						data: {
							userid: uni.getStorageSync('userid'),
							mission_id: data.mission_id
						},
						header: _this.$API.get_head(),
						success: (res)=>{
							console.log(res)
							uni.hideLoading();
							uni.showToast({title: res.data.message});
							_this.getNormalList();
						},
						fail: ()=>{
							uni.hideLoading();
						}
					})
				}
			})
		},
		// 选择日期
		onSelected(e){
			const now = new Date();
			const choose = e.date;
			if(now>choose){
				uni.showToast({title: '请重新选择时间'});
				return false;
			}
			let [year, month, date] = e.value.split('/');
			this.start_time = `${year}-${month}-${date}`;
			this.doTransferTask(uni.getStorageSync('to_user'));
		},
		// 取消日期选则
		onCancel(){
			this.showPicker = false;
			uni.removeStorageSync('to_user');
		},
		// 发起任务转让
		transferTask(data){
			uni.setStorageSync('task_mission_id', data.mission_id);
			uni.navigateTo({
				url: '../organization/choiceDeptAndName'
			})
		},
		// 执行任务转让
		doTransferTask(to_user){
			let _this = this;
			uni.showLoading();
			uni.request({
				method: 'POST',
				url: _this.$API.transferTask,
				data: {
					to_user,
					userid: uni.getStorageSync('userid'),
					mission_id: uni.getStorageSync('task_mission_id'),
					start_time: _this.start_time
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					uni.showToast({title: '转让成功'});
					uni.removeStorageSync('to_user');
					uni.removeStorageSync('task_mission_id');
					_this.showPicker = false;
					_this.getNormalList();
				},
				fail: ()=>{
					uni.hideLoading();
				}
			})
		},
		// 获取用户基本信息
		getUserInfo(){
			let _this = this;
			uni.request({
				method: 'POST',
				url: _this.$API.getUserInfo,
				data: {userid: uni.getStorageSync('userid')},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.userInfo = res.data.data;
					
					if(_this.userInfo.avatar && _this.userInfo.avatar.substr(0, 4) == 'http')
						_this.userInfo.avatar = _this.userInfo.avatar
					else
						_this.userInfo.avatar = _this.$API.baseURL + _this.userInfo.avatar
				}
			})
		},
		// 获取列表
		getNormalList(){
			let _this = this;
			uni.request({
				method: 'POST',
				url: _this.$API.normalCheck,
				data: {userid: uni.getStorageSync('userid')},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.list = res.data.data.missions;
				}
			})
		},
		// 获取交班记录
		getHandleList(){
			let _this = this;
			uni.request({
				method: 'POST',
				url: _this.$API.riskHandleList,
				data: {userid: uni.getStorageSync('userid')},
				header: this.$API.get_head(),
				success: (res)=>{
					console.log(res)
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 获取专项检查
		getSpecialList(){
			let _this = this;
			uni.request({
				url: this.$API.riskSpecial,
				data: {
					userid: this.userid,
					page: this.page,
				},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getSpeicalNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getSpecialList();
			}
		},
		// 综·专详情
		toSpecialDetail(item){
			let url = item.STATUS ? 'riskSpecialDetailLook' : 'riskSpecialDetail';
			uni.navigateTo({
				url: url + `?id=${item.id}&title=${item.title}`
			})
		},
		// 页面跳转
		toPage(url){
			uni.navigateTo({url});
		},
		// 功能暂未开放
		showToast(title){
			uni.showToast({
				icon: 'none',
				title: title
			})
		},
		// 获取当前日期
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
}
</script>

<style scoped>
page{
	background-color: #F2F2F2 !important;
}
.container{
	padding: 20upx;
	box-sizing: border-box;
}

button{
	background: #1692DC;
	font-size: 32upx;
	height: 80upx;
	line-height: 80upx;
	margin-bottom: 20upx;
}

/*卡片容器*/
.card-box{
	padding: 20upx 20upx 2upx;
	background: #fff;
	margin-bottom: 30upx;
}
.card-box-title{
	font-weight: bold;
	text-indent: 40upx;
	position: relative;
}
.card-box-title::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #609EF4;
	border-radius: 4upx;
	position: absolute;
	top: 12upx;
	left: 20upx;
}
.card-box-content{
	padding-top: 10upx;
}
.card-box-content .card{
	margin-bottom: 30upx;
	border-radius: 16upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card-box-content .card .item{
	padding: 0;
	margin-bottom: 0;
	text-indent: 20upx;
}

/*列表*/
.list{
	margin-top: 20upx;
	height: calc(100vh - 170upx - 180upx - 80upx - 94upx);
}
.list .item{
	background: #fff;
	border-radius: 16upx;
	padding: 20upx;
	margin-bottom: 20upx;
}
.list .item .status{
	color: red;
}
.list .item.success view,
.list .item.success .status{
	color: #00CE1C !important;
}
.list .item .top{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list .item .left{
	width: calc(100% - 160upx);
}
.list .item .left view{
	color: #444;
	font-size: 26upx;
}
.list .item .left view:first-child{
	padding-left: 20upx;
	position: relative;
}
.list .item .left view:first-child::before{
	content: '';
	width: 6upx;
	height: 26upx;
	background: #F47713;
	position: absolute;
	top: 12upx;
	left: 0;
}
.list .item .right{
	width: 160upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.list .item .right image{
	width: 80upx;
	height: 80upx;
}
.list .item .right .transfer{
	color: #fff;
	background: #FA8303;
	font-size: 26upx;
	width: 140upx;
	height: 50upx;
	line-height: 50upx;
	border-radius: 10upx;
	text-align: center;
	margin-top: 10upx;
}
.list .item .right .transfer-text{
	color: #FA8303;
	font-weight: bold;
	line-height: 1 !important;
}
.list .item .btns{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20upx;
}
.list .item .btns view{
	color: #fff;
	padding: 4upx 30upx;
	border-radius: 16upx;
	margin: 0 20upx;
}
.list .item .btns .receive{
	background: green;
}
.list .item .btns .refuse{
	background: red;
}

.none{
	text-align: center;
	padding: 20upx 0;
	color: #999;
}

/*tabs*/
.tabs{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80upx;
	background: #E8E8E8;
	border-radius: 16upx;
	overflow: hidden;
}
.tabs .tab{
	width: calc(100% / 3);
	height: 100%;
	line-height: 80upx;
	text-align: center;
}
.tabs .tab.active{
	color: #29A1E5;
	background: #fff;
}
.tabs .tab.active text{
	height: 100%;
	display: inline-block;
	position: relative;
}
.tabs .tab.active text::after{
	content: '';
	width: 100%;
	height: 4upx;
	background: #29A1E5;
	position: absolute;
	bottom: 0;
	left: 0;
}

/*操作入口*/
.entry{
	height: 180upx;
	margin-bottom: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.entry .block{
	width: calc((100% - 40upx) / 3);
	height: 100%;
	background: #fff;
	border-radius: 16upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.entry .block .img{
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	background: #1893DD;
	margin-top: 20upx;
}
.entry .block .img image{
	width: 60upx;
	height: 60upx;
	margin: 20upx;
}
.entry .block:last-child .img image{
	width: 74upx;
	height: 74upx;
	margin: 13upx;
}
.entry .block text{
	color: #444;
	font-size: 26upx;
}

/*头部信息*/
.header{
	height: 130upx;
	padding: 20upx;
	background: #fff;
	margin-bottom: 20upx;
	border-radius: 16upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header .left{
	width: 140upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.header .left image{
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
	margin: 10upx auto 10upx;
}
.header .left text{
	color: #444;
	font-size: 28upx;
	font-weight: bold;
	overflow: hidden;
}
.header .right{
	width: calc(100% - 160upx);
	position: relative;
}
.header .right image{
	width: 16px;
	height: 30px;
	position: absolute;
	right: -10upx;
	top: 45upx;
}
.header .right .item{
	display: flex;
	align-items: center;
}
.header .right .item:nth-child(2){
	margin: 2upx 0;
}
.header .right .item view:first-child{
	width: 58%;
}
.header .right .item view:last-child{
	width: 38%;
}
.header .right .item view{
	margin-right: 2%;
	font-size: 26upx;
}
.header .right .item text{
	margin: 0 4upx;
}
.header .right .item .uncheck{
	color: orange;
}
.header .right .item .checking{
	color: red;
}
.header .right .item .checked{
	color: green;
}
</style>
